<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="orole">
    <h1>用户授权</h1>
    <hr>
    <template>
        <h3>{{suser.userName}}的角色是{{rolename1}}</h3>
    </template>
    <div>
        <el-select v-model="roleId" style="width:167px;margin-right: 25px;" >
            <el-option v-for="role in roles1" :label="role.roleName" :value="role.id">
                <span>{{ role.roleName }}</span>
            </el-option>
        </el-select>
    </div>
    <hr>
    <div>
        <el-button @click="abrogateUser">取消</el-button>
        <el-button @click="roleUserLcal" type="primary">确认授权</el-button>
    </div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#orole",
        data(){
            return{
                userId:'',
                roleId:'',
                roleIdL:'',
                roles1:null,
                suser:null,
                rolename1:'未分配'
            }
        },
        methods: {
            loginRoles() {
                axios.get("/roleuser").then(value => {
                    this.roles1 = value.data;
                    console.log(value.data)
                });
            },

            loginsUser() {
                axios.get("/userur").then(value => {
                    this.suser = value.data;
                    this.userId = value.data.id
                    this.loginUserRole(value.data.id)
                    console.log(value.data)
                });
            },
            loginUserRole(id) {
                axios.get("/usER/" + id).then(value => {
                    console.log(value.data)
                    this.roleIdL = value.data;
                    for (var i in this.roles1){
                        console.log(this.roles1[i])
                        if (this.roles1[i].id==value.data){
                            this.roleId=value.data
                            this.rolename1=this.roles1[i].roleName
                        }
                    }

                });
            },
            abrogateUser(){
                location.href="/usercontrol/user-list.html"
            },
            roleUserLcal(){
                axios.put("/roleUserLcal/"+this.roleIdL+"/"+this.roleId+"/"+this.userId).then(value => {
                   this.abrogateUser()
                    console.log(this.roleId)

                })
            }
        },
        mounted() {
            this.loginRoles()
            this.loginsUser()
        }
    });
</script>
</body>

</html>